<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseCreate()"
    >
        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                class="company-create"
                label-width="120px"
                status-icon
        >

            <el-form-item
                    label="公司名称"
                    prop="name"
            >
                <el-input
                        v-model="api.createState.form.name"
                        clearable
                        placeholder="公司名称"
                />
            </el-form-item>

            <el-tabs
                    v-model="settings.active"
                    style="min-height: 300px"
                    type="border-card"
            >
                <el-tab-pane label="小程序" name="applet">
                    <el-form-item
                            label="appid"
                            prop="appid"
                    >
                        <el-input
                                v-model="settings.applet.appid"
                                clearable
                                placeholder="小程序 appid"
                        />
                    </el-form-item>

                    <el-form-item
                            label="秘钥"
                            prop="appid"
                    >
                        <el-input
                                v-model="settings.applet.secret"
                                clearable
                                placeholder="小程序秘钥"
                        />
                    </el-form-item>
                </el-tab-pane>

                <el-tab-pane label="公众号" name="general">
                    <el-form-item
                            label="appid"
                            prop="generalAppid"
                    >
                        <el-input
                                v-model="settings.general.appid"
                                clearable
                                placeholder="公众号 appid"
                        />
                    </el-form-item>
                    <el-form-item
                            label="秘钥"
                            prop="generalSecret"
                    >
                        <el-input
                                v-model="settings.general.secret"
                                clearable
                                placeholder="公众号秘钥"
                        />
                    </el-form-item>
                    <el-form-item
                            label="token"
                            prop="generalCheckToken"
                    >
                        <el-input
                                v-model="settings.general.token"
                                clearable
                                placeholder="公众号 认证的token"
                        />
                    </el-form-item>
                    <el-form-item
                            label="token秘钥"
                            prop="generalCheckAesKey"
                    >
                        <el-input
                                v-model="settings.general.aesKey"
                                clearable
                                placeholder="公众号 认证的token 秘钥"
                        />
                    </el-form-item>
                </el-tab-pane>

            </el-tabs>

            <el-form-item class="mb-0 mt-3" label-width="0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {CompanyApi} from "@/api/system/company/company.api";
import {FormRules} from "element-plus";

interface Props {
    api: CompanyApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive<FormRules>({
    name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
});

const settings = reactive({
    active: "applet",
    applet: {
        appid: "",
        secret: "",
    },
    general: {
        appid: "",
        secret: "",
        token: "",
        aesKey: "",
    },
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.createState.form.settingList = [];
                api.createState.form.settingList.push({
                    label: "小程序配置",
                    code: "applet",
                    children: [
                        {
                            label: "小程序appid",
                            value: settings.applet.appid,
                            code: "appid",
                        },
                        {
                            label: "小程序秘钥",
                            value: settings.applet.secret,
                            code: "secret",
                        },

                    ]
                });
                api.createState.form.settingList.push({
                    label: "公众号配置",
                    code: "general",
                    children: [
                        {
                            label: "公众号appid",
                            value: settings.general.appid,
                            code: "appid",
                        },
                        {
                            label: "公众号秘钥",
                            value: settings.general.secret,
                            code: "secret",
                        },
                        {
                            label: "认证的token",
                            value: settings.general.token,
                            code: "token",
                        },
                        {
                            label: "认证的token秘钥",
                            value: settings.general.aesKey,
                            code: "aesKey",
                        }
                    ]
                });
                api.onCloseCreate();
            }
        });
    }
}

</script>

<style lang="scss" scoped>
.company-create {
  :deep(.el-tabs__content) {
    padding-left: 0;
  }
}
</style>
